import { NavBar, Space, Swiper } from 'antd-mobile';
import React, { Component } from 'react';
import { goods_list } from "../api/index";
import '../styles/Good.scss'
class Good extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
      list_tu: [],
      list_price: [],
      list_name: [],
      list_introduce: [],
      list_tips: [],

    }
  }

  async componentDidMount() {
    var res = await goods_list({ id: this.props.location.state.id })
    this.setState({ list: res.data })
    // 图片
    this.setState({ list_tu: res.data[0].pic })
    // 价格
    this.setState({ list_price: res.data[0].price })
    // 名字
    this.setState({ list_name: res.data[0].name })
    // 介绍
    this.setState({ list_introduce: res.data[0].introduce })
    // 提示
    this.setState({ list_tips: res.data[0].tips })

    // console.log(res.data[0].price);
    // console.log(this.props.location.state.id);
  }
  back() {
    console.log(11);
    this.props.history.go(-1)
  }
  render() {
    return (
      <div className='good'>
        <div className="top5">
          <NavBar
            style={{ '--height': '40px' }}
            onBack={() => { this.back() }}>
            商品详情
          </NavBar>
        </div>
        <div className="shang5">
          <div className="tu5">
            <Space direction='vertical' block>
              <Swiper
                indicator={(total, current) => (
                  <div className='kk'>
                    {`${current + 1} / ${total}`}
                  </div>
                )}
              >
                {
                  this.state.list_tu.map((item, index) => {
                    return (
                      <Swiper.Item key={index}>
                        <div>
                          <img src={item.p1} alt="" />
                        </div>
                      </Swiper.Item>
                    )
                  })

                }
              </Swiper>
            </Space>
          </div>
          <div className="price5">
            ￥{this.state.list_price}
          </div>
          <div className="name5">
            {this.state.list_name}
          </div>
          <div className="introduce5">
            {this.state.list_introduce}
          </div>
          <div className="tips5">
            {
              this.state.list_tips.map((item, index) => {
                return (
                  <div className="item51" key={index}>
                    <div className="p1">{item.t}</div>
                    <div className="p2">{item.s}</div>
                  </div>

                )
              })
            }
          </div>
        </div>
        <div className="kong5"></div>
        <div className="zhong5">
          <div className="distribution">
            <span>配送</span>
            <span className='p1'>立即下单，预计今日送达</span>
          </div>
          <div className="discount">
            <span>优惠</span>
            <span className='p1'>目前暂无优惠</span>
          </div>
        </div>
        <div className="kong5"></div>
        <div className="xia5">
          <h3>详情</h3>
          <div className="xiangqing5">
            这里是商品详情
          </div>
        </div>
        <div className="bottom5">
          <div className='p1'>
            <span className="iconfont icon-gouwuche"></span>
            <p>购物车</p>
          </div>
          <div className='p1'>
            <span className="iconfont icon-icon-test9"></span>
            <p>客服</p>
          </div>
          <div className='p1'>
            <span className="iconfont icon-icon-test12"></span>
            <p>收藏</p>
          </div>
          <div className='p2'>加入购物车</div>
        </div>
      </div>
    );
  }
}

export default Good;